<template>
    <div class="ComItem">
        <component
            :is=registerComs[activeComName]
            :comItem="comItem"
            :selectedComSchema="selectedComSchema"
        ></component>
        <div class="ComItem-operate">
            <div class="ComItem-operate-item">
                <div class="ComItem-operate-item-img">
                    <img src="https://img01.yzcdn.cn/upload_files/2022/10/24/FueYv1jc5D0AkaF0v3K4diy1DPKG.png">
                    <div class="widget-name tooltip">向上移动</div>
                </div>
            </div>
            <div class="ComItem-operate-item">
                <div class="ComItem-operate-item-img">
                    <img src="https://img01.yzcdn.cn/upload_files/2022/10/24/FrIFvEtzBFK3edruBVYb-2Is6ym7.png">
                    <div class="widget-name tooltip">向下移动</div>
                </div>
            </div>
            <div class="ComItem-operate-item">
                <div class="ComItem-operate-item-img">
                    <img src="https://img01.yzcdn.cn/upload_files/2022/10/24/FgG-Z8qcd7IZEvNCPGSUWIGClm0G.png">
                    <div class="widget-name tooltip">置底</div>
                </div>
            </div>
            <div class="ComItem-operate-item">
                <div class="ComItem-operate-item-img">
                    <img src="https://img01.yzcdn.cn/upload_files/2022/10/24/FmUtrCDn22WQfzkUYwgsjTkRNyuO.png">
                    <div class="widget-name tooltip">复制</div>
                </div>
            </div>
            <div class="ComItem-operate-item">
                <div class="ComItem-operate-item-img">
                    <img src="https://img01.yzcdn.cn/upload_files/2022/10/24/FlhLBYgOwgQgETQIsi01fVNAC86l.png">
                    <div class="widget-name tooltip">备注</div>
                </div>
            </div>
            <div class="ComItem-operate-item">
                <div class="ComItem-operate-item-img">
                    <img src="https://img01.yzcdn.cn/upload_files/2022/10/24/Fn8qANLH3hZN30maWPVmk6goG73i.png">
                    <div class="widget-name tooltip">删除</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
  defineAsyncComponent,
  markRaw,
  reactive,
  ref,
  toRefs,
} from 'vue';

const components = import.meta.glob("../**/*.vue");
const props = defineProps({
    IDkey: {
        type: String,
        required: true,
    },
    index: {
        type: Number,
        required: true,
    },
    comItem: {
        type: Object,
        required: true,
    },
    comList: {
        type: Array,
        required: true,
    },
    selectedComSchema: {
        type: Object,
        required: true,
    },
});
const { IDkey, index, comItem, comList  } = toRefs(props);
const registerComs = reactive({});
comList.value.forEach(config => {
    const { name } = config;
    registerComs[name] = markRaw(defineAsyncComponent(() => import(`../PreviewCom/${name}/index.vue`)));
});
const activeComName = ref('TitleText');
console.log('components--------', registerComs);
</script>

<style lang="less" scoped>
.ComItem{
    position: relative;
    border: 2px dashed rgba(0,0,0,0);
    font-size: 16px;
    background-color: rgb(112, 230, 220);
    cursor: move;
    &:hover{
        border: 2px dashed rgb(88, 133, 223);
    }
    &.active{
        border: 2px solid rgb(88, 133, 223);
    }
    &-operate{
        position: absolute;
        top: 0;
        right: -40px;
        width: 38px;
        height: 208px;
        background: #fff;
        box-shadow: 0 2px 8px 0 rgba(200,201,204,.5);
        border-radius: 2px;
        padding: 2px 0;
        box-sizing: border-box;
        &-item{
            cursor: pointer;
            &-img{
                cursor: pointer;
                width: 100%;
                height: 34px;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                img{
                    width: 26px;
                    height: 26px;
                }
                &:hover{
                    .tooltip{
                        display: flex;
                    }
                }
                .tooltip{
                    width: 88px;
                    height: 24px;
                    line-height: 24px;
                    padding: 4px 7px;
                    background: #333;
                    color: #fff;
                    font-size: 14px;
                    text-align: center;
                    position: absolute;
                    right: -95px;
                    top: 50%;
                    border: 1px solid #e0e0e0;
                    border-radius: 2px;
                    box-sizing: border-box;
                    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    display: none;
                    &::before{
                        content: " ";
                        position: absolute;
                        left: -10px;
                        // top: 12px;
                        // right: -7px;
                        width: 0;
                        height: 0;
                        border: 5px solid transparent;
                        border-right-color: #333;
                        border-top: 7px solid transparent;
                        // border-left: 7px solid #e0e0e0;
                        border-bottom: 7px solid transparent;
                        // display: none;
                    }
                    // &::after{
                    //     content: " ";
                    //     position: absolute;
                    //     top: 13px;
                    //     right: -6px;
                    //     bottom: 11px;
                    //     left: -10px;
                    //     width: 0;
                    //     height: 0;
                    //     border-top: 6px solid transparent;
                    //     border-left: 7px solid #fff;
                    //     border-bottom: 6px solid transparent;

                    // }

                }
            }
        }
    }
}
</style>